{{template "common/header.html" .}}
{{template "common/nav.html" .}}

<section class="main">
    <div class="container">

        <div class="columns">
            <div class="column is-21">
                <div class="widget">
                    <div class="header">
                        <nav class="breadcrumb" aria-label="breadcrumbs">
                            <ul>
                                <li><a href="{{baseUrl}}">首页</a></li>
                                <li><a href="{{baseUrl}}/user/{{.CurrentUser.Id}}">{{.CurrentUser.Nickname}}</a></li>
                                <li class="is-active"><a href="#" aria-current="page">发布</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="content">
                        <div class="columns" style="margin:0px;">
                            <div class="column is-3" style="padding-left: 0px!important;">

                                <div class="field">
                                    <div class="control has-icons-left">
                                    <span class="select" style="width: 100%;">
                                        <select name="tagId" id="tagId" class="input">
                                            <option value="">请选择标签</option>
                                            {{if .Tags}}
                                                {{range .Tags}}
                                                    <option value="{{.TagId}}">{{.TagName}}</option>
                                                {{end}}
                                            {{end}}
                                        </select>
                                    </span>
                                        <span class="icon is-small is-left"><i class="iconfont icon-tag"></i></span>
                                    </div>
                                </div>

                            </div>
                            <div class="column is-9" style="padding-right: 0px!important;">

                                <div class="field">
                                    <div class="control">
                                        <input name="title" id="title" class="input" type="text" placeholder="标题">
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="field">
                            <div class="control">
                                <div name="content" id="editor" style="border: 1px solid #d1d5da;"></div>
                            </div>
                        </div>

                        <div class="field is-grouped">
                            <div class="control">
                                <a class="button is-success" id="articleCreateSubmit">发表</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-3">
                <div class="widget">
                    <div class="header">Markdown 语法参考</div>
                    <div class="content">
                        <ol>
                            <li><tt>### 单行的标题</tt></li>
                            <li><tt>**粗体**</tt></li>
                            <li><tt>`console.log('行内代码')`</tt></li>
                            <li><tt>```js\n code \n```</tt> 标记代码块</li>
                            <li><tt>[内容](链接)</tt></li>
                            <li><tt>![文字说明](图片链接)</tt></li>
                        </ol>
                        <span><a href="https://www.mlog.club/article/5522" target="_blank">Markdown 文档</a></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/vditor/dist/index.classic.css"/>
<script src="//cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    const vditor = new Vditor('editor', {
      cache: false,
      height: 400,
      toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list', 'check', 'code',
        'inline-code', 'undo', 'redo', 'upload', 'link', 'table', 'preview', 'fullscreen'],
      upload: {
        accept: 'image/*',
        token: 'test',
        url: '{{baseUrl}}/upload/editor',
        linkToImgUrl: '{{baseUrl}}/upload/fetch',
        filename(name) {
          return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
        }
      },
    })
    vditor.focus()

    $('#articleCreateSubmit').click(function () {
      var params = {
        tagId: $('#tagId').val(),
        title: $('#title').val(),
        content: vditor.getValue(),
      }
      httpPost('{{baseUrl}}/article/create', params).then(function (data) {
        window.location = '{{baseUrl}}/article/' + data.articleId
      }, function (response) {
        alert(response.message)
      })
    })
  })

</script>

{{template "common/footer.html" .}}
